import 'package:flutter/material.dart';
import 'package:flutter_project/common/route_page/route_name.dart';
import 'package:flutter_project/config/app_bar_view.dart';
import 'package:flutter_project/config/theme_color.dart';
import 'package:flutter_project/picture/welfare/sign_up_dialog_view.dart';
import 'package:flutter_project/picture/welfare/welfare_bubble_line_view.dart';
import 'package:flutter_project/picture/welfare/welfare_bubble_shape_view.dart';
import 'package:flutter_project/picture/welfare/withdrawal_main_page.dart';

import '../home/app_main_page.dart';

class WelfareAddPage extends StatefulWidget {
  const WelfareAddPage({super.key});

  @override
  State<WelfareAddPage> createState() => _WelfareAddPageState();
}

class _WelfareAddPageState extends State<WelfareAddPage> {
  @override
  Widget build(BuildContext context) {
    return CommonAppWidget.navAppBar(
        title: '福利中心',
        isHiddenLeftArrow: true,
        childWidget: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(
                height: 20,
              ),
              Container(
                color: Colors.white,
                padding:
                    const EdgeInsets.symmetric(horizontal: 13, vertical: 15),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    RichText(
                      text: const TextSpan(
                          text: '30',
                          style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                              color: Colors.black),
                          children: [
                            TextSpan(
                                text: '≈0.00元', style: TextStyle(fontSize: 14))
                          ]),
                    ),
                    TextButton(
                      onPressed: () {
                        RouteNames.push(const WithdrawalMainPage());
                      },
                      child: Row(
                        children: [
                          Text(
                            '去提现',
                            style: TextStyle(
                                color: ThemeColor.hint777777Color,
                                fontSize: 12),
                          ),
                          Icon(
                            Icons.arrow_forward_ios,
                            size: 16,
                            color: ThemeColor.checkNormalColor,
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              welfareBgCornerView(
                childWidget: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Icon(
                          Icons.task_sharp,
                          color: ThemeColor.orangeColor,
                          size: 18,
                        ),
                        const Text(
                          '日常任务',
                          style: TextStyle(
                              fontSize: 14, fontWeight: FontWeight.bold),
                        )
                      ],
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    getItemView(
                        topTitle: '签到',
                        desCribe: '连续签到七天必得630金币',
                        signStr: '点击签到',
                        clickBtnAction: () {
                          SignUpDialogView.showSignView(context);
                        }),
                    const SizedBox(
                      height: 15,
                    ),
                    getItemView(
                        topTitle: '每日看剧得金币',
                        desCribe: '今日已观看：0分钟',
                        signStr: '去观看',
                        clickBtnAction: () {
                          RouteNames.pushReplacement(AppMainPage());
                        }),
                    const SizedBox(
                      height: 15,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: getMetalRowList(),
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    Row(
                      children: getRoundLine(),
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    getItemView(
                        topTitle: '早间分享',
                        desCribe: '6:00-12:00分享可得金币',
                        signStr: '去分享'),
                    const SizedBox(
                      height: 15,
                    ),
                    getItemView(
                        topTitle: '去剧场看一看',
                        desCribe: '浏览剧场看好剧，立得50金币',
                        signStr: '去完成',
                         clickBtnAction: (){
                            RouteNames.pushReplacement(AppMainPage());
                         }
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    getItemView(
                        topTitle: '看小视频得金币',
                        desCribe: '观看小视频，得丰厚金币奖励',
                        signStr: '去观看'),
                    const SizedBox(
                      height: 5,
                    ),
                    Row(
                      children: [
                        Container(
                          width: 100,
                          color: Colors.orange,
                          height: 2,
                        ),
                        const SizedBox(
                          width: 5,
                        ),
                        Text(
                          '0/5次',
                          style: TextStyle(color: ThemeColor.checkNormalColor),
                        )
                      ],
                    ),
                  ],
                ),
              ),
              welfareBgCornerView(
                childWidget: Column(
                  children: [
                    Row(
                      children: [
                        Icon(
                          Icons.wallet_giftcard,
                          color: ThemeColor.orangeColor,
                          size: 18,
                        ),
                        const Text(
                          '新手福利',
                          style: TextStyle(
                              fontSize: 14, fontWeight: FontWeight.bold),
                        )
                      ],
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    getItemView(
                        topTitle: '登录', desCribe: '登录后可领取奖励哦～', signStr: '去登录'),
                  ],
                ),
              ),
              const SizedBox(
                height: 10,
              ),
            ],
          ),
        ));
  }

  Widget welfareBgCornerView({required Widget childWidget}) {
    return Container(
      margin: const EdgeInsets.only(top: 20, left: 10, right: 10),
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
      ),
      child: childWidget,
    );
  }

  //金币
  List<Widget> getMetalRowList() {
    List numList = [18, 98, 198, 498, 998];
    List<Widget> list = [];
    for (int element in numList) {
      list.add(BubbleWidget(
        width: 50.0,
        height: 35.0,
        position: BubbleArrowDirection.bottom,
        borderColor: Colors.orange,
        color: Colors.white,
        arrAngle: 15.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(
              Icons.monetization_on_outlined,
              size: 12,
              color: Colors.yellow,
            ),
            const SizedBox(
              width: 3,
            ),
            Text(
              element.toString(),
              style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ));
    }

    return list;
  }

  Widget getItemView({
    String topTitle = '',
    String desCribe = '',
    String signStr = '',
    Function? clickBtnAction,
  }) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  topTitle,
                  style: const TextStyle(
                      fontWeight: FontWeight.bold, fontSize: 16),
                ),
                const SizedBox(
                  width: 12,
                ),
                const Icon(
                  Icons.money_outlined,
                  color: Colors.orange,
                ),
                const Text(
                  '+30',
                  style: TextStyle(
                    color: Colors.orange,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            const SizedBox(
              height: 12,
            ),
            Text(
              desCribe,
              style: TextStyle(color: ThemeColor.textColorSecond),
            )
          ],
        ),
        ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.orange),
            ),
            onPressed: () {
              if (clickBtnAction != null) {
                clickBtnAction();
              }
            },
            child: Text(
              signStr,
              style: const TextStyle(color: Colors.white),
            ))
      ],
    );
  }

  //获取单个线段
  List<Widget> getRoundLine() {
    List<Widget> list = [];
    List timeList = [5, 10, 20, 50, 100];
    for (var element in timeList) {
      list.add(LineWithCircle(
        minute: element,
      ));
    }
    return list;
  }
}
